<template>
    <div class="mainBox">
        <div class="myTab">
            <el-table
                :data="tableData"
                :span-method="objectSpanMethod"
                border
                style="width: 100%"
                :header-row-style="{
                    textAlign: 'center',
                    height: '25px',
                    backgroundColor: 'var(--main-bgc)',
                }"
                :header-cell-style="{
                    backgroundColor: 'var(--main-bgc)',
                }"
                :row-style="{
                    backgroundColor: 'var(--main-bgc)',
                }"
                :cell-style="{
                    backgroundColor: 'var(--main-bgc)',
                }"
            >
                <el-table-column prop="date" label="车站名" width="180">
                    <template slot-scope="scope">
                        <el-select
                            v-model="region"
                            @change="changeSelect"
                            placeholder="请选择活动区域"
                        >
                            <el-option
                                v-for="item in selectData"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="计轴名" width="180">
                    <template slot-scope="scope">
                        <el-select
                            v-model="code"
                            @change="queryData"
                            placeholder="请选择活动区域"
                        >
                            <el-option
                                v-for="item in selectCode"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="室外磁头">
                    <el-table-column prop="receivePort" label="接收端">
                    </el-table-column>
                    <el-table-column prop="sendPort" label="发送端">
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="address" label="室外板卡">
                    <el-table-column prop="jiLong" label="机笼">
                    </el-table-column>
                    <el-table-column prop="mainBoard" label="主板">
                    </el-table-column>
                    <el-table-column prop="simulationBoard" label="模拟板">
                    </el-table-column>
                    <el-table-column prop="estimateBoard" label="评估板">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
        <div class="yearSele">
            <el-date-picker
                v-model="year"
                type="year"
                @change="queryYear"
                :disabled="code.length == 0"
                placeholder="选择年"
            >
            </el-date-picker>
        </div>
        <div class="dataBox">
            <div class="remark">
                <h3 style="margin-left:10px;">检修备注</h3>
                <div
                    v-for="(item, index) in remark"
                    :key="index"
                    style="display:flex;margin-bottom:10px;"
                >
                    <div
                        class="time"
                        style="width:180px;flex-shrink:0;margin-left:10px;"
                    >
                        {{ item.remarkTime }}
                    </div>
                    <div>{{ item.content }}</div>
                </div>
            </div>
            <div class="output">
                <el-table :data="tabData" border style="width: 100%">
                    <el-table-column prop="dataTime" label="时间" width="180">
                    </el-table-column>
                    <el-table-column
                        prop="channelPower1"
                        label="通道电源1"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="channelPower2"
                        label="通道电源2"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="head10Have"
                        label="磁头1(10)档有模拟轮"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="head10No"
                        label="磁头1(10)档无模拟轮"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="head12Have"
                        label="磁头1(12)档有模拟轮"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="head12No"
                        label="磁头1(12)档无模拟轮"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="head11Have"
                        label="磁头2(11)档有模拟轮"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="head11No"
                        label="磁头2(11)档无模拟轮"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="head13Have"
                        label="磁头2(13)档有模拟轮"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="head13No"
                        label="磁头2(13)档无模拟轮"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="terminal1V"
                        label="端子1电压"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="terminal11V"
                        label="端子11电压"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="sk1SendH"
                        label="Sk1发送频率"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="sk1SendV"
                        label="Sk1发送电压"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="sk2SendH"
                        label="Sk2发送频率"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="sk2SendV"
                        label="Sk2发送电压"
                        width="160"
                    >
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            year: "",
            tableData: [{}],
            selectData: [],
            selectCode: [],
            code: "",
            region: "",
            remark: [],
            tabData: [],
        };
    },
    created() {
        this.$http
            .get("services/app/JiZhouService/GetJiZhouSelect")
            .then((res) => {
                this.selectData = res.data.result;
            });
    },
    mounted() {},
    methods: {
        changeSelect(e) {
            let option = this.selectData.filter((item) => item.label == e);
            this.selectCode = option[0].children;
        },
        queryData(e) {
            this.$http
                .get(
                    "services/app/JiZhouService/GetJiZhouInfo?machineCode=" + e
                )
                .then((res) => {
                    if (res.data.result) this.tableData = [res.data.result];
                });
            this.$http
                .get(
                    "services/app/JiZhouService/GetAllJiZhouRemark?machineCode=" +
                        e
                )
                .then((res) => {
                    this.remark = res.data.result;
                });
        },
        queryYear(e) {
            this.$http
                .get(
                    "services/app/JiZhouService/GetJiZhouData?machineCode=" +
                        this.code +
                        "&year=" +
                        e.getFullYear()
                )
                .then((res) => {
                    this.tabData = res.data.result;
                });
        },
        //单元格合并
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            //行，列，行下标，列下标( 控制要合并的列 )
            let rowspan = this.tableData.length;
            if (columnIndex === 0) {
                if (rowIndex !== 0) {
                    return {
                        rowspan: 0, //合并的行数
                        colspan: 1,
                    };
                }
                return {
                    rowspan, //合并的行数
                    colspan: 1,
                };
            }
        },
    },
};
</script>
<style lang="less" scoped>
.mainBox {
    height: calc(100vh - 110px);
}
.myTab {
    padding: 20px;
    // background-color: #fff;
    margin-bottom: 10px;
    /deep/ .el-table__header-wrapper .el-table__cell {
        padding: 1px 0;
    }
}
/deep/ .el-input.is-disabled .el-input__inner {
    background: none !important;
    color: var(--input-fc) !important;
}
.yearSele {
    padding-right: 20px;
    // background-color: #fff;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.dataBox {
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .remark {
        // background-color: #fff;
        height: 49.5%;
        width: 100%;
        margin-bottom: 10px;
    }
    .output {
        // background-color: #fff;
        width: calc(100% - 20px);
        padding: 10px;
    }
}

/deep/ .el-table tr {
    background-color: var(--main-bgc);
}
/deep/ .el-table__row:hover {
    background-color: var(--main-bgc);
}
/deep/ .el-table__header {
    background-color: var(--main-bgc) !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px;
}
/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}
/deep/ input {
    color: #fff;
}
.el-cascader {
    /deep/ input[placeholder] {
        &::placeholder {
            color: #fff;
        }
    }
}

/deep/ input[placeholder] {
    &::placeholder {
        color: var(--color);
    }
}
/deep/ .el-cascader {
    .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
}

/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}
.el-table {
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    padding-bottom: 5px;
    /deep/.el-table__row:nth-child(2n + 1) {
        // background-color: #f8f8f8 !important;
    }
}
/deep/ .el-input {
    input {
        background-color: var(--input-bgc);
    }
}
/deep/ .el-input__inner::placeholder {
    color: var(--input-fc) !important;
}
/deep/ .el-cascader {
    .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
}
/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}
/deep/ .el-table thead {
    color: var(--main-fc);
    // background-color: red;
    tr {
        background-color: var(--main-bgc);
    }
}
/deep/ .el-table {
    border: none;
    padding: 0;
    background-color: var(--main-bgc);
    .el-table__empty-block {
    }
    .el-table__row {
        border: none;
    }
    input {
        background-color: var(--input-bgc);
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
    .el-table__body-wrapper {
        background-color: #323232 !important;
    }
    color: var(--main-fc);
}
/deep/ .el-table td.el-table__cell,
/deep/ .el-table th.el-table__cell.is-leaf {
    // border-bottom: none;
    background: none;
}
/deep/ .el-table thead.is-group th.el-table__cell {
    background-color: var(--main-bgc);
}
</style>
